<template>
  <el-row :gutter="10">
    <el-col :span="12">
      <el-card shadow="always">
        <div class="header" slot="header">
          <span>实施活动</span>
          <el-dropdown>
            <span class="el-dropdown-link">
              <i class="el-icon-more"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>黄金糕</el-dropdown-item>
              <el-dropdown-item>狮子头</el-dropdown-item>
              <el-dropdown-item>螺蛳粉</el-dropdown-item>
              <el-dropdown-item disabled>双皮奶</el-dropdown-item>
              <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>

        <el-row :gutter="10">
          <el-col :span="12">
            <div class="charts" ref="scatter">123</div>
          </el-col>
          <el-col :span="12">
            <div class="charts" ref="rad">456</div>
          </el-col>
        </el-row>

        <el-table border stripe>
          <el-table-column label="排名" width> </el-table-column>
          <el-table-column label="关键字" width> </el-table-column>
          <el-table-column label="用户数" width sortable> </el-table-column>
          <el-table-column label="周涨幅" width sortable> </el-table-column>
        </el-table>

        <el-pagination
          class="page"
          background
          :current-page="1"
          :page-sizes="[10, 20, 50]"
          :page-size="3"
          layout="prev, pager, next, jumper"
          :total="50"
        >
        </el-pagination>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card>
        <div class="header">
          <span>销售</span>
          <el-radio-group v-model="radio1">
            <el-radio-button label="上海"></el-radio-button>
            <el-radio-button label="北京"></el-radio-button>
            <el-radio-button label="广州"></el-radio-button>
            <el-radio-button label="深圳"></el-radio-button>
          </el-radio-group>
        </div>

        <div class="pie" ref="pie"></div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      radio1: "",
    };
  },
  name: "Footer",
  mounted() {
    //初始化两个图形图标
    this.scatter();
    this.radar();
    this.pie();
  },
  methods: {
    pie() {
      let myCharts = echarts.init(this.$refs.pie);
      let option = {
        title: {
          text: "核潜艇",
          subtext: "300",
          top: 240,
          left: 255,
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: true,
              position: "outside",
            },
            // emphasis: {
            //   label: {
            //     show: true,
            //     fontSize: "40",
            //     fontWeight: "bold",
            //   },
            // },
            labelLine: {
              show: true,
            },
            data: [
              { value: 1048, name: "航母" },
              { value: 735, name: "飞机" },
              { value: 580, name: "舰艇" },
              { value: 484, name: "大炮" },
              { value: 300, name: "导弹" },
            ],
          },
        ],
      };

      myCharts.setOption(option);
      myCharts.on("mouseover", function (params) {
        myCharts.setOption({
          title:{
            text:params.data.name,
            subtext:params.data.value,
          }
        });
      });
    },
    //散点图
    scatter() {
      let mycharts = echarts.init(this.$refs.scatter);
      let option = {
        xAxis: {
          show: false,
          type: "category",
        },
        yAxis: {
          show: false,
        },
        series: {
          type: "scatter",
          data: [10, 9, 2, 14, 25, 60],
        },
      };
      //设置配置项
      mycharts.setOption(option);
    },
    //雷达图
    radar() {
      let mycharts = echarts.init(this.$refs.rad);
      let option = {
        radar: {
          // shape: 'circle',
          indicator: [
            { name: "Sales", max: 6500 },
            { name: "Administration", max: 16000 },
            { name: "Information Technology", max: 30000 },
            { name: "Customer Support", max: 38000 },
            { name: "Development", max: 52000 },
            { name: "Marketing", max: 25000 },
          ],
        },
        series: [
          {
            name: "Budget vs spending",
            type: "radar",
            data: [
              {
                value: [4200, 3000, 20000, 35000, 50000, 18000],
                name: "Allocated Budget",
              },
              {
                value: [5000, 14000, 28000, 26000, 42000, 21000],
                name: "Actual Spending",
              },
            ],
          },
        ],
      };
      //设置配置项
      mycharts.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-between;
}
.charts {
  width: 100%;
  height: 280px;
}
.page {
  float: right;
  ::v-deep .number {
    color: red !important;
  }
}
.pie {
  width: 100%;
  height: 500px;
}
</style>